<template>
	<view class="detailsPage hundredFamilySurnames customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar tabs-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="tabs-item selected" @click="toHundredFamilySurnames">百家姓</text>
			<text class="tabs-item" @click="toPaper">论文</text>
			<text class="tabs-item" @click="toCase">案例</text>
			<text class="tabs-item" @click="toSurnameOrigin">姓氏来源</text>
		</view>
		<view class="blood-type-tabs">
			<text class="tabs-item" :class="{'selected':index == bloodTypeTabsCurrent}" v-for="(item, index) in bloodTypeTabsList" :key="index" @click="bloodTypeTabsChange(index,item.value)">{{item.name}}</text>
		</view>
		<view class="container-wrap">
			<view class="container">
				<view class="search-bar">
					<view class="search-form">
						<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="doSeachInput">
						<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
					</view>
				</view>
				<view class="table">
					<view class="thead" v-if="bloodTypeTabsCurrent === 0">血型AB型显性来源炎帝时代人主要有：</view>
					<view class="thead" v-if="bloodTypeTabsCurrent === 1">血型B型显性来源黄帝时代人主要有：</view>
					<view class="thead" v-if="bloodTypeTabsCurrent === 2">A型显性，来源于契或大业时代的人物主要有：</view>
					<view class="thead" v-if="bloodTypeTabsCurrent === 3">血型0显性，来源于4000多年前后稷时代人物主要有：</view>
					<view class="tbody">
							<view class="tr"  v-for="(itemlist, index) in bloodList" :key="index"  >
								<block  v-for="(item, index2) in itemlist" :key="item.id" >
								<text :class="bgGreed==item.id?'bg-green':''">{{item.bloodName}}</text><text :style="bgGreed!=item.id?'background-color: #FFFFFF':''" :class="bgGreed==item.id?'bg-green':''">{{item.bloodNo}}</text></block>
								</view>
						
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
	</view>
</template>

<script>
	import { getBloddInfoList} from '@/common/api.js';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				bgGreed:null,
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				bloodTypeTabsList:[
					{
						name: 'AB型',
						value:'AB'
					},
					{
						name: 'B型',
						value:'B'
					},
					{
						name: 'A型',
						value:'A'
					},
					{
						name: 'O型',
						value:'O'
					}
				],
				bloodTypeTabsCurrent: 0,
				searchInput: '',
				bloodListAll:[],
				bloodList:[],
				bloodList_AB:[],
				bloodList_A:[],
				bloodList_B:[],
				bloodList_O:[],
			}
		},onShow() {
			this.getBloddInfoList("AB");
		},
		methods: {
			//
			doSeachInput(){
				let that=this;
				this.bloodListAll.forEach(function(itemList, index) {
							  itemList.forEach(function(item, index2) {
							                  //item2 就是当日按循环到的对象
							                  //index2是循环的索引，从0开始
							   			   if(item.bloodName==that.searchInput){
							   				   that.bgGreed=item.id
											   if(item.bloodType=='AB'){
												     that.bloodTypeTabsCurrent=0;
													 that.bloodList=that.bloodList_AB;
											   }else  if(item.bloodType=='A'){
												    that.bloodTypeTabsCurrent=2;
													that.bloodList=that.bloodList_A;
											   }else  if(item.bloodType=='B'){
												    that.bloodTypeTabsCurrent=1;
													that.bloodList=that.bloodList_B;
											   }else  if(item.bloodType=='O'){
												   that.bloodTypeTabsCurrent=3;
												   that.bloodList=that.bloodList_O;
											   }
											  console.log(item.bloodType)
							   			   }
										   
							      })
				   })
			},
			getBloddInfoList(type){
				// get请求
				getBloddInfoList().then(data => {
					console.log(data)
					if(type=="AB"){
					this.bloodList=data.AB;	
					}else if(type=="A"){
						this.bloodList=data.A;	
					}else if(type=="B"){
						this.bloodList=data.B;
					}else if(type=="O"){
						this.bloodList=data.O;
					}
					this.bloodList_AB=data.AB;	
					this.bloodList_A=data.A;	
					this.bloodList_B=data.B;	
					this.bloodList_O=data.O;	
					this.bloodListAll=data.All
				}).catch(() =>{
					
				})
			
			},
			clearInput() {
				this.searchInput = '';
				this.bgGreed=null;
			},
			bloodTypeTabsChange(index,type) {
				this.bloodTypeTabsCurrent = index;
				if(type=="AB"){
				this.bloodList=this.bloodList_AB;	
				}else if(type=="A"){
					this.bloodList=this.bloodList_A;	
				}else if(type=="B"){
					this.bloodList=this.bloodList_B;
				}else if(type=="O"){
					this.bloodList=this.bloodList_O;
				}
			},
			toHundredFamilySurnames() {
				uni.redirectTo({
					url: '../hundredFamilySurnames/hundredFamilySurnames',
				});
			},
			toCase() {
				uni.redirectTo({
					url: '../case/case',
				});
			},
			toPaper() {
				uni.redirectTo({
					url: '../paper/paper',
				});
			},
			toSurnameOrigin() {
				uni.redirectTo({
					url: '../surnameOrigin/surnameOrigin',
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			},
			
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>